<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.float {
				width: 6.25rem;
				height: 6.25rem;
				position: absolute;
				background-color: aquamarine;
				opacity: 0.5;
			}
			.box {
				display: flex;
				justify-content: space-between;
				padding: 3rem;
				
			}

			.ampsmall img {
				width: 31.25rem;
			}
			.ampsmall{
				widows: 31.25rem;
				overflow: hidden;
			}
			.ampbig{
				width: 25rem;
				height: 25rem;
				overflow: hidden;
			}
		</style>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="box" id="box">
			<div class="ampsmall">
				<div class="float"></div>
				<img src="../img/小人(小).jpg" alt="small" />

			</div>
			<div class="ampbig">
				<img src="../img/小人(大).jpg" alt="big">
			</div>
		</div>
		
	</body>
	<script type="text/javascript">
		$.getJSON("./demo.json",function(re){
				 for(var i=0;i<re.length;i++){
					 console.log(re[i].name)
				 }
		});
      /* var box =$(".box").get(0);
	   document.getElementById()
	   var aa=document.getElementById("box");
	   //js onclick 对应 jquery click
	   //js onmousemove 对应 mousemove
	   $(".box").mousemove(function(e){
		   let x=e.pageX;
		   let y=e.pageY;
		   $(".float").css("left",x);
		   $(".float").css("top",y);
		   
	   })
	   $(".ampsmall").mouseout(function(){
		     $(".float").css("display","none");
			 console.log(1)
	   }) */

	   		window.onload = function () {
	               var url = "./demo.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
	               var request = new XMLHttpRequest()
	               request.open("get", url);/*设置请求方法与路径*/
	               request.send(null);/*不发送数据到服务器*/
	               request.onload = function () {/*XHR对象获取到返回信息后执行*/
	                   if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
	                       var json = JSON.parse(request.responseText);
	                       for(var i=0;i<json.length;i++){
	                       	console.log(json[i].name);
	                       }
	                       console.log(json);
	                   }
	               }
	          } 
	
	  
	</script>
</html>
